<template>
  <div class="c-ph34 c-pv30 c-w100 relative" v-if="dataInfo != null">
    <div class="c-textAlign-c c-fs32 c-fc-xblack c-fw-b c-pv30 c-lh48">{{dataInfo.activityName}}</div>
    <div class="c-textAlign-c c-fs28 c-fc-sblack c-pb30 c-lh48">
      {{dataInfo.guideLangue}}
    </div>
    <template v-if="dataInfo.qrCode">
      <div
        class="relative c-ph64 c-w100"
        @touchstart="gotouchstart"
        @touchend="gotouchend"
      >
        <img :src="dataInfo.qrCode" class="c-w100"/>
      </div>
    </template>
    <div v-else class="c-flex-column c-flex-center c-justify-center c-pv32">
      <img class="c-ww250" src="https://ck-bkt-knowledge-payment.oss-cn-hangzhou.aliyuncs.com/admin/material/9_material_admin/image/assets/i/wap/fashou/empty.png"/>
      <div class="c-fs24 c-w100 c-textAlign-c c-fc-gray c-mt20">
        暂无可加入的群，请联系管理员添加
      </div>
    </div>
    <div
      v-if="dataInfo.openTips == 1"
      class="wechatService c-pv12 c-ph12 c-bg-lblue c-fs24 c-fc-white c-br-tl36 c-br-bl36"
      @click.prevent="showWechat()"
    >
      无法进群
    </div>

    <!-- 无法加群，底部弹窗 -->
    <FollowOffiaccount v-if="dataInfo" :showOffaccountQr.sync="showWechatService" :isFromGroupCode="true" :officialAccountQrCode="dataInfo.erweimaUrl" :title="dataInfo.tipContent" @refresh="refresh" btText="请长按二维码添加客服微信"/>
  </div>
</template>

<script>
import FollowOffiaccount from "@/components/templates/fashou/followOffiaccount.vue";
import { utilJs } from "@/utils/common.js";
export default {
  components:{
    FollowOffiaccount
  },
  props:{},

  data() {
    return {
      dataInfo: null,
      showWechatService: false,
    }
  },

  created() {
    setDocumentTitle('扫码入群');
    this._theGroupId = this.$route.query.groupId || '';
    this._timeOutEvent = null;
    this.getCode();
  },
  destroyed() {
    clearTimeout(this._timeOutEvent);
  },

  methods:{
    refresh() {
      this.$loading.hide();
      this.$loading.show();
      this.showWechatService = false
      this.getCode(1);
    },
    getCode(refresh = 0) {
      // 管理端扫码带的参数rcId、refereeId
      const moreRcUrl = this.$route.query.rcId ? `&rcId=${this.$route.query.rcId}` : ''
      const moreRefereeUrl = this.$route.query.refereeId ? `&refereeId=${this.$route.query.refereeId}` : ''
      utilJs.getMethod(global.fashouApiUrl + `groupQrcode/getGroupQrcode?groupId=${this._theGroupId}&isSkeleton=1${moreRcUrl}${moreRefereeUrl}${refresh == 1 ? '&refresh=1' : ''}`, res => {
        this.dataInfo = res;
        this.$loading.hide();
      }, () => {
        this.$loading.hide();
        this.$routerGo(this, "replace", { path: `/fashou/activity` });
      })
    },
    gotouchstart () {
      clearTimeout(this._timeOutEvent);// 清除定时器
      this._timeOutEvent = setTimeout(() => {
        utilJs.postMethod(global.fashouApiUrl + `groupQrcode/updateScanNum?groupId=${this._theGroupId}&codeId=${this.dataInfo.codeId}`, res => {
          this.dataInfo = res;
        }
      )}, 800); // 这里设置定时
    },
    gotouchend () {
      clearTimeout(this._timeOutEvent);// 清除定时器
    },
    showWechat() {
      clearTimeout(this._timeOutEvent);// 清除定时器
      this._timeOutEvent = null;
      this.showWechatService = true;
    },
  }
}
</script>

<style scoped>
.wechatService {
  position: fixed;
  right: 0;
  bottom: 80px;
  z-index: 100;
}
</style>